<template>
  <!-- animated是必须添加的；bounce是动画效果；infinite从语义来看也秒懂，无限循环，不添加infinite默认播放一次 -->
  <div>
<!--    <img src="@/assets/logo/snowman.png" class="animated bounce1 infinite">-->
    <img src="@/assets/logo/snowman.png" class="animated1 bounce1 infinite" onclick="card()">
  </div>
</template>
<script>
export default {
  name: 'light'
}
</script>
<style>
.bounce1 {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  margin-left: 100px;
  margin-top: 150px;
}
.animated1 {
  -webkit-animation-duration: 3s;
  animation-duration: 10s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.bounce {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
</style>
